<template>
    <div class="form-input-wrap">
        <div class="up-border"></div>
        <div :class="['input-content', { 'input-content-fucus': edit }]">
            <slot></slot>
        </div>
        <div class="angle-left-top"></div>
        <div class="angle-right-top"></div>
        <div class="angle-right-bottom"></div>
        <div class="angle-left-bottom"></div>
    </div>
</template>
<script></script>
<style lang="scss">
.form-input-wrap {
    width: 180px;
    height: 33px;
    margin-top: 10px;
    position: relative;
    .up-border {
        width: 100%;
        height: 3px;
        background: url("../../assets/image/operate-sys/up-border.png") repeat-y;
        background-size: 100% 100%;
    }
    .input-content {
        width: 100%;
        height: 28px;
        display: inline-flex;
        align-items: center;
        justify-content: space-between;
        background: #242a3f;
        color: #fff;
        font-size: 12px;
        padding: 0 4px;
        box-sizing: border-box;
    }
    .input {
        background: transparent;
        width: 60px;
        height: 20px;
        line-height: 20px;
        font-size: 12px;
        border: 1px solid #2c3249;
        padding: 0;
        input {
            background: transparent;
            height: 20px;
            line-height: 20px;
            border: none;
            border-radius: 0;
            outline: none;
        }
    }
    .input-border {
        border: 1px solid #0791a4;
    }
    .input-content-fucus {
        background: linear-gradient(#002c48, #025177);
    }
    .edit-btn {
        background: transparent;
        font-size: 12px;
        color: #fff;
        border: 1px solid #0791a4;
        padding: 0 4px;
    }
    .angle-left-top {
        width: 6px;
        height: 5px;
        background: url("../../assets/image/operate-sys/t1.png");
        position: absolute;
        top: -3px;
        left: -3px;
    }
    .angle-left-bottom {
        width: 6px;
        height: 5px;
        background: url("../../assets/image/operate-sys/t2.png");
        position: absolute;
        bottom: -3px;
        left: -3px;
    }
    .angle-right-top {
        width: 6px;
        height: 5px;
        background: url("../../assets/image/operate-sys/t3.png");
        position: absolute;
        right: -3px;
        top: -3px;
    }
    .angle-right-bottom {
        width: 6px;
        height: 5px;
        background: url("../../assets/image/operate-sys/t4.png");
        position: absolute;
        right: -3px;
        bottom: -3px;
    }
}
</style>
